<template>
  <div class="phone-content-wrap">
    <van-nav-bar
      title="手机号"
      left-arrow
      @click-left="$router.back()"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>

    </van-nav-bar>
    <div class="phone-wrap">
      <van-field
        v-model="phone"
        center
        clearable
        label="手机号"
        placeholder="请输入要更改的手机号"
      />

      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-count-down :time="time"  ref="countDown">
            <template #default="timeData">
              <van-button v-if="timeData.seconds<=0" @click="sendSms" size="small"
                          color="linear-gradient(to right, #ff6034, #ee0a24)" >
                发送验证码
              </van-button>
              <van-button v-else disabled    size="small" class="un-clickable"  type="primary">
                {{ timeData.seconds }}秒后重发
              </van-button>
            </template>
          </van-count-down>
        </template>
      </van-field>
    </div>
    <div class="submit-button"  >
      <van-button type="primary" block round size="small"
                  color="linear-gradient(to right, #ff6034, #ee0a24)">
        确认修改
      </van-button>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'phone',
  methods: {
    sendSms () {
      this.time = 10 * 1000
      this.$refs.countDown.reset()
      Toast('验证码已发送到您的手机，请注意查收')
    }

  },
  data () {
    return {

      time: 0,
      sms: '',
      phone: this.$store.getters.getUserPhone
    }
  }
}
</script>

<style scoped>

.un-clickable {
  color: #c5c5c5;
  background: white;
border: 1px #c5c5c5 solid ;
}

.phone-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.phone-content-wrap {
  height: 100%;
  background: white;
}
.submit-button{
  margin-top: 30px;
  padding: 10px;
}
</style>
